<template>
  <div class="course">
    <my-tabs :tab-list="tabList">
      <template v-slot="{ row }">
        <li
          class="item pointer"
          :class="{ active: routePath === row.type }"
          @click="handleClickMenu(row)"
        >
          {{ row.title }}
        </li>
      </template>
    </my-tabs>
    <el-row :gutter="22" class="course-list">
      <el-col :span="6" v-for="(item, index) in normalList" :key="index">
        <div class="item">
          <div class="picture" @click="handleContinueLearning(item)">
            <edu-image :src="item.course_cover" fit="cover"></edu-image>
            <span class="tag" :class="courseTypeClass[item.course_type]">{{
              item.course_type_text
            }}</span>
            <span class="time">
              {{ item.expire_rest === -1 ? '永久有效' : `距离课程到期还有${item.expire_rest}天` }}
            </span>
          </div>
          <div class="desc">
            <div class="name">{{ item.course_title }}</div>
            <el-row type="flex" justify="space-between">
              <div class="progress">已学{{ item.finished_rate || 0 }}%</div>
              <el-link
                :underline="false"
                type="primary"
                class="btn"
                @click="handleContinueLearning(item)"
                >继续学习</el-link
              >
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider content-position="center">过期课程</el-divider>
    <el-row :gutter="22" class="course-list">
      <el-col :span="6" v-for="(item, index) in expiredList" :key="index">
        <div class="item">
          <div class="picture">
            <edu-image :src="item.course_cover" fit="cover"></edu-image>
            <span class="tag" :class="courseTypeClass[item.course_type]">{{
              item.course_type_text
            }}</span>
            <span class="time">课程已过期</span>
          </div>
          <div class="desc">
            <div class="name expired-text">{{ item.course_title }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      tabList: [
        {
          type: 1,
          path: '/my/study/course',
          title: '点播'
        },
        {
          type: 2,
          path: '/my/study/course',
          title: '直播'
        },
        {
          type: 4,
          path: '/my/study/course',
          title: '班级'
        }
      ],
      courseTypeClass: { 1: 'video', 2: 'live', 3: 'multipart', 4: 'classes' },
      normalList: [],
      expiredList: [],
      routePath: 1
    }
  },
  created() {
    this.handleCourseInfo()
  },
  methods: {
    handleCourseInfo() {
      this.$api.getRecordCourse(
        {
          course_type: this.routePath,
          order: 'add'
        },
        res => {
          const { data } = res
          this.normalList = data.normal
          this.expiredList = data.expired
        }
      )
    },
    // 继续学习
    handleContinueLearning(item) {
      this.$router.push({ path: '/course/' + item.course_id })
    },
    handleClickMenu(data) {
      this.routePath = data.type
      this.handleCourseInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
.course {
  .course-list {
    .item {
      margin-bottom: 20px;
      .picture {
        height: 0;
        width: 100%;
        position: relative;
        padding-top: 110px;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        .el-image {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        .tag {
          padding: 5px 8px;
          font-size: 12px;
          font-weight: 400;
          line-height: 1;
          color: #ffffff;
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.08);
          border-radius: 0px 0px 6px 0px;
          position: absolute;
          left: 0;
          top: 0;
          &.video {
            background-color: #ff8a8a;
          }
          &.live {
            background-color: #67c23a;
          }
          &.multipart {
            background-color: #80ccff;
          }
          &.classes {
            background-color: #ff8a52;
          }
        }
        .time {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 6px 8px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
          background: rgba(0, 0, 0, 0.4);
        }
      }
      .desc {
        margin-top: 10px;
        .name {
          font-size: 14px;
          color: $text-color-import;
          margin-bottom: 6px;
          @include ellipsis();
        }
        .expired-text {
          color: $text-color-auxiliary;
        }
        .progress {
          font-size: 12px;
          color: $text-color-auxiliary;
        }
        .btn {
          font-size: 12px;
        }
      }
    }
  }
}
.el-divider--horizontal {
  width: 276px;
  margin-left: auto;
  margin-right: auto;
}
.el-divider__text {
  color: #b7bac1;
}
</style>
